#define orderProgress()
<style>
	.orderprogress {
		overflow: hidden;
		font-size: 0;
	}
	
	.orderprogress .pro {
		width: 55px;
		height: 85px;
		display: inline-block;
		vertical-align: top;
		text-align: center;
		position: relative;
	}
	
	.orderprogress .pro .circular {
		width: 55px;
		height: 55px;
		border: 3px solid #909092;
		border-radius: 50%;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}
	
	.orderprogress .pro .circular i {
		font-size: 26px;
		line-height: 46px;
		color: #909092;
	}
	
	.orderprogress .pro .text {
		color: #909092;
		line-height: 35px;
		font-size: 14px;
		white-space: nowrap;
		position: absolute;
    	width: 100px;
    	left: 50%;
    	margin-left: -50px;
	}
	
	.orderprogress .bor {
		width: 45px;
		height: 3px;
		background-color: #909092;
		display: inline-block;
		margin-top: 28px;
	}
	
	.orderprogress .pro.success .circular {
		border-color: #00cc33;
	}
	
	.orderprogress .pro.success .circular i {
		color: #00cc33;
	}
	
	.orderprogress .pro.success .text {
		color: #00cc33;
	}
	
	.orderprogress .bor.success {
		background-color: #00cc33;
	}
	
	.orderprogress .pro.err .circular {
		border-color: #f0ad4e;
	}
	
	.orderprogress .pro.err .circular i {
		color: #f0ad4e;
	}
	
	.orderprogress .pro.err .text {
		color: #f0ad4e;
	}
	
	.orderprogress .bor.err {
		background-color: #f0ad4e;
	}
	
</style>
<div class="orderprogress" id="orderprogress">
	
</div>
#end